<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>        
    <input type="color">
    <button id="btn">清除</button>
    <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas</canvas>
    <script>
        var cvs=document.getElementById("canvas");
        var gts=cvs.getContext("2d");
        cvs.onmousedown=function(ev){
            var ev=ev || window.event;
            var x = ev.clientX-cvs.offsetLeft;
            var y = ev.clientY-cvs.offsetTop;
                gts.moveTo(x,y);
            this.onmousemove=function(ev){
                var x = ev.clientX-cvs.offsetLeft;
                var y = ev.clientY-cvs.offsetTop;
                var ev=ev || window.event;
                gts.lineTo(x,y);
                gts.stroke();
            }
            this.onmouseup=function(){
                cvs.onmousemove=null;
            }
        }
        var btn=document.getElementById("btn");
            btn.onclick =  function(){
            gts.clearRect(0,0,700,700);
        }
    </script>
</body>
</html>